<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
<style>
.bd{border:1px #ccc solid; height:40px; margin:5px; padding:5px; display:block; position:absolute; width:200px; background:#ccc}
</style>
<script src="../$$.js"></script>
<script src="../prototype/Object.js"></script>
<script src="../prototype/Array.js"></script>
<script src="../prototype/String.js"></script>
<script src="../prototype/Function.js"></script>
<script src="../Class.js"></script>
<script src="../Component.js"></script>
<script src="../util/Task.js"></script>
<script src="../util/Thread.js"></script>
<script src="../DomHelper.js"></script>
<script src="../Element.js"></script>
<script src="../Animation.js"></script>
<script src="../Animation/Transition.js"></script>

</head>
<body>

</body>
<script>
var el1 = $$.DomHelper.create({html: '1', cls: 'bd'});
var el2 = $$.DomHelper.create({html: '2', cls: 'bd'});
var el3 = $$.DomHelper.create({html: '3', cls: 'bd'});
var el4 = $$.DomHelper.create({html: '4', cls: 'bd'});

$$.DomHelper.append(document.body, el1);
//$$.DomHelper.append(el1, el2);
//$$.DomHelper.append(el1, el3);
//$$.DomHelper.insertBefore(el1, el3, el2);
//$$.DomHelper.insertAfter(el1, el4, el2);
//$$.DomHelper.update(el3, {tag: 'span', html: 'sfd', style: {color: 'red'}});
//$$.DomHelper.insertAt(el1, el4, 6);
//$$.DomHelper.remove(el2);


var tran = new $$.Animation.Transition({
	x0: 0
	,x: 100
	,v0: 0
	,a: 2	
});

var anim = new $$.Animation(el1);
anim.move(tran);
</script>
</html>